<!--
 * @Author: pengzhuoying
 * @Date: 2022-03-02 14:09:26
 * @LastEditors: pengzhuoying
 * @LastEditTime: 2022-03-02 21:26:22
 * @Description: pengzhuoying created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\quote\organization.vue
-->
<template>
  <div class="quoteOrganization relative">
    <el-form
      :model="searchValue"
      ref="queryForm"
      :inline="true"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="组织名称">
        <el-input
          placeholder="请输入组织名称"
          clearable
          style="width: 200px"
          v-model="searchValue.orgName"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="orgName" label="组织名称"></el-table-column>
      <el-table-column prop="orgDescription" label="组织描述"></el-table-column>
      <el-table-column prop="orgAddress" label="组织地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >辅料配置</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 20px"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalSize"
    ></el-pagination>
    <!--弹窗 -->
    <el-dialog :title="orgName" :visible.sync="dialogVisible" width="500px">
      <div v-if="expressForm">
        <el-form
          :model="expressForm"
          :rules="expressRules"
          ref="expressForm"
          label-width="100px"
        >
          <el-form-item label="辅料编码" prop="columnData">
            <el-select
              v-model="expressForm.columnData"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="getAccessoriesTypes"
              placeholder="辅料编码"
              clearable
            >
              <el-option
                v-for="dict in accessoriesList"
                :key="dict.materialNumber"
                :label="dict.materialNumber"
                :value="dict.materialNumber"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="submitDefinition">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "quoteOrganization",
  data() {
    return {
      tableData: null,
      pageNum: 1,
      pageSize: 10,
      totalSize: 10,
      searchValue: {
        orgName: "",
      },
      dialogVisible: false,
      loading: false,
      expressForm: {},
      expressRules: {
        columnData: [
          { required: true, message: "请选择辅料编码", trigger: "blur" },
        ],
      },
      currentIndex: null,
      accessoriesList: [],
      columnData: [],
      primaryKey: "",
      orgName: "",
    };
  },
  async created() {
    await this.getParamsList();
  },
  watch: {
    pageNum: {
      deep: true,
      handler: function () {
        this.getParamsList();
      },
    },
  },
  methods: {
    handleQuery() {
      this.getParamsList();
    },
    resetQuery() {
      this.searchValue.orgName = null;
      this.handleQuery();
    },
    //提交表单
    submitDefinition() {
      let params = {
        tableName: "erp_dim_org",
        primaryKey: this.primaryKey,
        params: {
          columnData: this.expressForm.columnData,
          columnKey: "basicAssistMaterial",
        },
      };
      this.$refs["expressForm"].validate((valid) => {
        if (valid) {
          this.$db
            .addAccessories(params)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("提交成功");
                this.dialogVisible = false;
              } else {
                this.$message.error(res.code + "-" + res.msg);
              }
              this.loading = false;
            })
            .catch((e) => {
              this.$message.error(e.toString());
            });
        }
      });
    },
    /* 获取组织列表 */
    getParamsList() {
      return new Promise((resolve) => {
        this.loading = true;
        let params = {
          pn: this.pageNum,
          ps: this.pageSize,
          orgName_like: this.searchValue.orgName,
        };
        if (!this.searchValue.orgName) {
          delete params.orgName;
        }

        this.$db
          .queryErpTableExt(params)
          .then((res) => {
            if (res.code === 200) {
              this.tableData = res.data.rows;
              this.totalSize = res.data.total * 1;
            } else if (res.code === 500) {
              this.tableData = [];
              this.$message.info("组织为空！");
            } else {
              this.$message.error(res.code + "-" + res.msg);
            }
            this.loading = false;
            resolve();
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      });
    },
    //获取辅料列表
    getAccessoriesTypes(val) {
      let params = {
        materialNumber_like: val,
        useOrgId: this.primaryKey,
      };
      this.$db.getAccessoriesType(params).then((res) => {
        if (res.code == 200) {
          this.accessoriesList = res.data.rows;
        } else {
          this.$message.error(res.code + "-" + res.msg);
        }
      });
    },
    //转换
    replaceValue(arr) {
      let newarr =
        arr != null
          ? arr.replace("[", "").replace("]", "").replace(/\s/g, "").split(",")
          : "";
      return newarr;
    },
    //获取绑定辅料
    handleUpdate(row) {
      this.reset();
      let params = {
        columnKey: "basicAssistMaterial",
        primaryKey: row.orgId,
        tableName: "erp_dim_org",
      };
      this.$db.getBindAccessories(params).then(async (res) => {
        if (res.code == 200) {
          this.dialogVisible = await true;
          this.primaryKey = row.orgId;
          this.orgName = row.orgName;
          await this.getAccessoriesTypes();
          this.expressForm.columnData = await res.data!=null?res.data:'';
        } else {
          this.$message.error(res.code + "-" + res.msg);
        }
      });
    },
    //重置表单
    reset() {
      this.resetForm("expressForm");
    },
  },
};

</script>

<style lang="less">
.quoteOrganization {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
}
</style>